<template>
  <div class="department-list">
    <a-card title="部门列表" class="list-card">
      <template #extra>
        <a-button type="primary" @click="showAddModal">添加部门</a-button>
      </template>

      <div class="search-bar">
        <a-input-search
            v-model:value="searchKeyword"
            placeholder="输入部门名称搜索"
            @search="handleSearch"
            style="width: 300px"
        />
      </div>

      <a-spin :spinning="loading">
        <a-table
            :columns="columns"
            :data-source="departmentData"
            :pagination="pagination"
            row-key="id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small" @click="viewDetail(record.id)">查看</a-button>
                <a-button size="small" @click="editDepartment(record)">编辑</a-button>
                <a-button size="small" danger @click="confirmDelete(record.id)">删除</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-spin>
    </a-card>

    <!-- 添加/编辑部门模态框 -->
    <a-modal
        v-model:visible="modalVisible"
        :title="modalTitle"
        @ok="handleModalOk"
        @cancel="handleModalCancel"
    >
      <a-form
          :model="formState"
          :rules="formRules"
          ref="formRef"
      >
        <a-form-item label="部门名称" name="name">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="部门主管" name="manager">
          <a-input v-model:value="formState.manager" />
        </a-form-item>
        <a-form-item label="部门描述" name="description">
          <a-textarea v-model:value="formState.description" :rows="4" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue'

// 表格列配置
const columns = [
  {
    title: '部门名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '部门主管',
    dataIndex: 'manager',
    key: 'manager'
  },
  {
    title: '员工人数',
    dataIndex: 'employeeCount',
    key: 'employeeCount'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '操作',
    key: 'action',
    width: '220px'
  }
]

// 数据状态
const departmentData = ref([
  { id: 1, name: '技术部', manager: '张伟', employeeCount: 120, createTime: '2020-01-15' },
  { id: 2, name: '市场部', manager: '李娜', employeeCount: 90, createTime: '2020-02-20' },
  { id: 3, name: '人力资源部', manager: '王芳', employeeCount: 50, createTime: '2020-03-10' },
  { id: 4, name: '财务部', manager: '赵强', employeeCount: 30, createTime: '2020-04-05' },
  { id: 5, name: '产品部', manager: '刘洋', employeeCount: 80, createTime: '2020-05-12' }
])

const loading = ref(false)
const searchKeyword = ref('')
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 5,
  showSizeChanger: true
})

// 模态框相关
const modalVisible = ref(false)
const modalTitle = ref('添加部门')
const formState = reactive({
  id: null,
  name: '',
  manager: '',
  description: ''
})
const formRules = {
  name: [{ required: true, message: '请输入部门名称' }],
  manager: [{ required: true, message: '请输入部门主管' }]
}

const router = useRouter()

// 搜索
const handleSearch = () => {
  pagination.value.current = 1
  // 这里实际项目中应该调用API
  if (searchKeyword.value) {
    departmentData.value = departmentData.value.filter(item =>
        item.name.includes(searchKeyword.value)
    )
  } else {
    departmentData.value = [
      { id: 1, name: '技术部', manager: '张伟', employeeCount: 120, createTime: '2020-01-15' },
      { id: 2, name: '市场部', manager: '李娜', employeeCount: 90, createTime: '2020-02-20' },
      { id: 3, name: '人力资源部', manager: '王芳', employeeCount: 50, createTime: '2020-03-10' },
      { id: 4, name: '财务部', manager: '赵强', employeeCount: 30, createTime: '2020-04-05' },
      { id: 5, name: '产品部', manager: '刘洋', employeeCount: 80, createTime: '2020-05-12' }
    ]
  }
}

// 查看详情
const viewDetail = (id) => {
  router.push(`/department/detail/${id}`)
}

// 显示添加模态框
const showAddModal = () => {
  modalTitle.value = '添加部门'
  formState.id = null
  formState.name = ''
  formState.manager = ''
  formState.description = ''
  modalVisible.value = true
}

// 编辑部门
const editDepartment = (record) => {
  modalTitle.value = '编辑部门'
  formState.id = record.id
  formState.name = record.name
  formState.manager = record.manager
  formState.description = record.description || ''
  modalVisible.value = true
}

// 确认删除
const confirmDelete = (id) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除该部门吗？此操作不可撤销。',
    okText: '确认',
    cancelText: '取消',
    onOk() {
      handleDelete(id)
    }
  })
}

// 处理删除
const handleDelete = (id) => {
  // 实际项目中应该调用API
  departmentData.value = departmentData.value.filter(item => item.id !== id)
  message.success('删除成功')
}

// 模态框确认
const handleModalOk = () => {
  // 这里应该调用API保存数据
  if (formState.id) {
    // 编辑
    const index = departmentData.value.findIndex(item => item.id === formState.id)
    if (index !== -1) {
      departmentData.value[index] = {
        ...departmentData.value[index],
        name: formState.name,
        manager: formState.manager,
        description: formState.description
      }
    }
    message.success('部门信息更新成功')
  } else {
    // 新增
    const newId = Math.max(...departmentData.value.map(item => item.id)) + 1
    departmentData.value.push({
      id: newId,
      name: formState.name,
      manager: formState.manager,
      employeeCount: 0,
      createTime: new Date().toISOString().split('T')[0],
      description: formState.description
    })
    message.success('部门添加成功')
  }
  modalVisible.value = false
}

// 模态框取消
const handleModalCancel = () => {
  modalVisible.value = false
}
</script>

<style scoped>
.department-list {
  padding: 20px;
}

.list-card {
  border-radius: 8px;
}

.search-bar {
  margin-bottom: 20px;
}
</style>